@mixin lightStyles {
  background: var(--black2);
  color: black;

  :global .token {
    &.comment,
    &.prolog,
    &.doctype,
    &.cdata {
      color: slategray;
    }

    &.namespace {
      opacity: 0.7;
    }

    &.property,
    &.tag,
    &.boolean,
    &.number,
    &.constant,
    &.symbol,
    &.deleted {
      color: #905;
    }

    &.selector,
    &.attr-name,
    &.char,
    &.builtin,
    &.inserted {
      color: #690;
    }

    &.entity,
    &.url {
      background: hsla(0, 0%, 100%, 0.5);
      color: #9a6e3a;
    }

    &.atrule,
    &.attr-value,
    &.keyword {
      color: #07a;
    }

    &.function,
    &.class-name {
      color: #dd4a68;
    }

    &.regex,
    &.important,
    &.variable {
      color: #e90;
    }

    &.important,
    &.bold {
      font-weight: var(--font-weight-vold);
    }
    &.italic {
      font-style: italic;
    }

    &.entity {
      cursor: help;
    }

    &.punctuation,
    &.operator,
    &.string {
      background-color: var(--black2);
    }
  }
}
